<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../icon/iconfont.css" />
    <style>
        body {
            padding: 1.6rem 0.8rem 0 0.8rem;
        }

        header span:nth-of-type(1) {
            font-size: 1rem
        }

        header span:nth-of-type(2) {
            font-size: 1rem
        }
        .title {
            padding: 0.8rem 0 0.4rem 0;
            /*text-align: center;*/
        }

        .box {
            width: 100%;
            height: 3rem;
            border-top: 1px solid rgb(223, 223, 225);
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000;
        }

        .right {
            position: relative;
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .box1 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left1 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left1 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right1 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right1 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }
        .box2 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left2 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left2 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right2 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right2 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }
        .box3 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
            margin-bottom: 0.5rem
        }

        .left3 {
            float: left;
            width: 30%;
            height: 100%;
            /*border-right: 1px solid rgb(223, 223, 225);*/
            display: flex;
            align-items: center;
        }

        .left3 p {
            width: 100%;
            padding-left: 1rem;
            font-size: 0.9rem;
            color: #000
        }

        .right3 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right3 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .submit {
            margin-top: 1rem;
            width: 100%;
            height: 2.3rem;
            background-color: rgb(215, 32, 45);
            text-align: center;
            line-height: 2.3rem;
            font-size: 0.9rem;
            color: #fff
        }
    </style>
</head>

<body>
    <header>
        <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
        <span>修改支付密码</span>
    </header>
    <div class="content" style="padding-top:1rem">
        <!-- <p class="title">设置密码后可以通过账号+密码登录APP</p> -->
        <div class="box">
            <div class="left">
                <p>登录账号</p>
            </div>
            <div class="right">
                <input type="number" placeholder="请输入注册时的手机号" id="tel" readonly>
            </div>
        </div>
        <div class="box1">
            <div class="left1">
                <p>验证码</p>
            </div>
            <div class="right1">
                <input type="number" placeholder="请填写验证码" id="yzm" maxlength="18">
                <button style="background-color:rgb(201, 22, 26);color:#fff;width:3.8rem" id="btn_yzm">验证码</button>
            </div>
        </div>
        <div class="box2">
            <div class="left2">
                <p>新密码</p>
            </div>
            <div class="right2">
                <input type="password" placeholder="6位数字" id="password">
            </div>
        </div>
        <div class="box3">
            <div class="left3">
                <p>确认密码</p>
            </div>
            <div class="right3">
                <input type="password" placeholder="请确认新密码" id="repassword">
            </div>
        </div>
        <p>密码为6位有效数字</p>
        <button class="submit" id="submit">提交申请</button>
    </div>
</body>
<script type="text/javascript" src="../../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/dns.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function() {
      $('#tel').val(api.pageParam.tel)
    };
    var toast = new auiToast({
        })
      var token = localStorage.getItem("token");

      $("#btn_yzm").click(function () {
        var tel = document.getElementById("tel").value;
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(tel))) {
            toast.fail({
                title:"请输入正确合法的手机号!",
                duration:1500
            });
            return false;
        };
        $("#yzm").focus();
        clearInterval(timer);
        $("#btn_yzm").css("backgroundColor","#ccc")
        var time = 59;
        var timer = null;
        var that = this;
        timer = setInterval(function() {
            if (time <= 0) {
                $("#btn_yzm").html("重新发送")
                $("#btn_yzm").css("backgroundColor","rgb(215, 32, 45)")
                $("#btn_yzm").removeAttr('disabled');
                clearInterval(timer)
            } else {
                $("#btn_yzm").html(time+"s")
                time--;
            }
        }, 1000);
        $("#btn_yzm").attr('disabled', 'disabled');
        console.log(tel);
        $.ajax({
            type: "get",
            dataType: 'json',
            data: {
                mobile: tel
            },
            url: dns + "smscode",
            success: function(res) {
              if(res.code == 20000){
                  // alert(res.data.msg)
                  toast.success({
                      title:"发送成功!",
                      duration:1500
                  });
              }
            },
            error:function(err){
              var json = JSON.parse(err.responseText);
              toast.fail({
                  title:json.msg,
                  duration:1500
              });
            }
        })
      });
      $("#submit").click(function () {
        var tel = document.getElementById("tel").value;
        var yzm = document.getElementById("yzm").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        if(yzm==''||yzm.length!=6){
          toast.fail({
              title:"请输入正确的验证码!",
              duration:1500
          });
          return false;
        };
        if (!( /^[0-9]{6}$/.test(password))) {
            toast.fail({
                title:"密码为六位有效数字哦!",
                duration:1500
            });
            return false;
        };
        if (password!=repassword) {
            toast.fail({
                title:"两次输入密码不一样，请重新输入!",
                duration:1500
            });
            return false;
        };
        $.ajax({
          type:"post",
          data:{
            mobile:tel,
            code:yzm,
            password:password,
            repassword:repassword
          },
          url:dns+"user/update/pay_password",
          success:function(res){
            if(res.code == 20000){
              toast.success({
                  title:"密码修改成功!",
                  duration:1500
              });
              setTimeout(function () {
                api.closeWin()
              },1000)
            }
          }
        })
      })











</script>

</html>
